<template>
  <el-dialog
    title="库存设置"
    v-model="dialogVisible"
    width="500px"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="库存上限">
        <el-input v-model="form.upLine" />
      </el-form-item>
      <el-form-item label="安全库存">
        <el-input v-model="form.safeStock" />
      </el-form-item>
      <el-form-item label="库存下限">
        <el-input v-model="form.offLine" />
      </el-form-item>
      <el-form-item label="货架期">
        <el-input 
          v-model="form.shelfLife" 
          style="width: 120px; margin-right: 8px;"
        />
        <el-select 
          v-model="form.unit" 
          style="width: 100px"
        >
          <el-option label="月" value="月"></el-option>
          <el-option label="天" value="天"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { updateStock } from '@/api/parameter/product.js';
import { message } from "@/utils/message";
import { ElMessage,ElMessageBox } from 'element-plus'; // Vue 3
// 修改为使用v-model标准语法
const props = defineProps({
  modelValue: { // 接收v-model的值
    type: Boolean,
    default: false
  },
  currentRow: { // 接收当前行数据
    type: Object,
    default: () => ({})
  }
});

// 定义要触发的事件
const emit = defineEmits(['update:modelValue', 'on-save']);

const dialogVisible = ref(props.modelValue);
const form = ref({
  upLine: '',
  safeStock: '',
  offLine: '',
  shelfLife: '',
  unit: ''
});

// 监听显示状态变化
watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal;
  console.log('弹窗可见性变化为:', newVal) // 用于调试
  
  // 如果打开弹窗且有当前行数据，可进行数据回显
  // if (newVal && props.currentRow) {
  //   // 这里可以根据实际数据结构进行回显
  //   form.value = {
  //     upLine: props.currentRow.upLine || '',
  //     safeStock: props.currentRow.safeStock || '',
  //     offLine: props.currentRow.offLine || '',
  //     shelfLife: props.currentRow.shelfLife || '',
  //     unit: props.currentRow.unit || 'month'
  //   };
  // }
}, { immediate: true });

// 处理保存
const handleSave = async () => {
  // 显示确认弹窗
  ElMessageBox.confirm(
    '确定要保存当前修改吗？',
    '保存确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      emit('on-save', form.value);
      try {
        const result = await updateStock({
          "createBy": "",
          "id": props.currentRow.id,
          "offLine": form.value.offLine,
          "safeStock": form.value.safeStock,
          "shelfLife": form.value.shelfLife,
          "unit": form.value.unit,
          "upLine": form.value.upLine,
          "updateBy": ""
        });

        if (result.status = 200) {
          // 保存成功的处理
          message('保存成功', { type: "success" });
          handleClose();
        } else {
          // 保存失败（接口返回失败状态）
          message(result.message, { type: "error" });
        }
      } catch (error) {
        // 网络错误或其他异常
        ElMessage.error('保存失败，网络异常');
        console.error('保存出错:', error);
      }
    })
    .catch(() => {
      // 用户点击取消，不执行任何操作
      message('已取消保存', { type: "info" });
    });
};

// 处理关闭
const handleClose = () => {
  emit('update:modelValue', false);
};
</script>